<template>
  <div class="page">
    <!--<profile-header :userInfo="userInfo"/>-->

    <div class="info">
      <zan-panel>
        <div class="card">
          <view class="thumbnail">
            <image class="avatar" src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"></image>
          </view>

          <view class="detail">
            <div class="detail-info">
              <div class="title">Ryan Feng
              </div>
            </div>
          </view>
        </div>
      </zan-panel>
    </div>

    <div style="margin-top: 1rem;">
      <zan-panel>
        <zan-row>
          <zan-col col="12" col-class="custom-zan-col">
            <zan-cell color="#333333" title="我的积分" icon="zan-icon-gift" value="460">
              <div slot="icon">
                <div style="margin-right: 0.1rem;">
                  <zan-icon type="exchange" style="color: #D291FB"></zan-icon>
                </div>
              </div>
            </zan-cell>
          </zan-col>
          <div style="position:absolute;width: 1px;height: 3rem; background: #F0F0F0; left: 50%; top: 0; z-index: 99;"></div>
          <zan-col col="12" col-class="custom-zan-col">
            <zan-cell color="#333333" title="我的钱包" icon="zan-icon-gift" value="460">
              <div slot="icon">
                <div style="margin-right: 0.1rem;">
                  <zan-icon type="cash-back-record" style="color: #D291FB"></zan-icon>
                </div>
              </div>
            </zan-cell>
          </zan-col>
        </zan-row>
      </zan-panel>
    </div>


    <div style="margin-top: 1rem;">
      <zan-cell-group>
        <zan-cell color="#333333" title="美发商城" icon="zan-icon-gift" is-link>
          <div slot="icon">
            <div style="margin-right: 0.1rem;">
              <zan-icon type="receive-gift" style="color: #D291FB"></zan-icon>
            </div>
          </div>
        </zan-cell>
      </zan-cell-group>
    </div>

  </div>
</template>

<script>
import profileHeader from "./header";


export default {
  data () {
    return {
      userInfo: []
    };
  },

  components: { profileHeader },

  computed: {
  },
  methods: {
  }
}
</script>

<style>
  page {
    background-color: #F8F8F8;
  }
</style>

<style scoped>

  .avatar {
    height: 1rem;
    width: 1rem;
  }

.counter-warp {
  text-align: center;
  margin-top: 100px;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}

  .card {
    display:flex;
    margin-left:0;
    padding: 0.15rem 0.3rem;
    overflow:hidden;
    position:relative;
  }


  .thumbnail {
    width: 1rem;
    height: 1rem;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    background-size:cover;
    border-radius: 0.1rem;
  }

  .thumbnail .avatar {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    overflow:hidden;
    max-width:100%;
    height:100%;
  }

  .detail {
    flex:1;
    margin-left:10px;
    position:relative;
  }

  .detail-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 4.5rem;
  }

  .title {
    height: 1rem;
    font-size:0.33rem;
    color: #333333;
    line-height:1rem;
    /*margin: 0.3rem 0 0.1rem 0;*/
  }
</style>
